<template>
  <div class="container">
    <div class="search-box">
      <van-search
        class="search"
        v-model="search"
        placeholder="搜索商品"
        shape="round"
        @search="onSearch"
      />
    </div>
    <Category :searchKeyword="searchKeyword" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Category from "./components/Category.vue";

const search = ref("");
const searchKeyword = ref("");

const onSearch = (value) => {
  searchKeyword.value = value;
};

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.search-box {
  flex: 0 0 auto;
}
.search {
  width: 100%;
  height: 40px;
}
</style>
